<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>新日暮里温泉馆</title>
  <base th:href="${#request.getContextPath()}+'/'">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="css/layui.css"  media="all">
  <link rel="stylesheet" href="css/serch.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		   <style>
        /*html, body, #container {
            height: 100%;
            width: 100%;
        }*/

        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=a1661afb10b214933c08f95f60668d52"></script>
<script src="layui.js" charset="utf-8"></script>
		
<style>
	.test{
		height: 100px;
		font-size:70px; 
		color:black;
		font-family: "biaoti";
		text-align: center;
		}
	.part2{
			color:#3F3F3F;
			font-family: "zhengwen";
			width: 90%;
			margin: 0px auto;
			}
		
		.part{
			color:#3F3F3F;
			font-family: "zhengwen";
			width: 90%;
			height: 460px;
			margin: 0px auto;
			}
			.part1{
				color:#3F3F3F;
				font-family: "zhengwen";
				width: 600px;
				height: 450px;
				line-height: 50px;
				float: left;
				}
				.layui-input-inline input{
					height: 50px; 
					width: 320px; 
					border-radius: 18px;
					border: solid 1px #E5E5E5;
					font-size: 20px;
					background: #FFFFFF;
					box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
					-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
					-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;  
					text-align: center;
					font-family: "仿宋";
					}

</style>

  <script type="text/javascript">
    $(function() {
    	showOrders();
    });
    
    function showOrders(){
    	$.ajax({
			url:"order/all",
			type:"get",
			dataType:"json",
			success:function(data){}
    	});
	}
	$(function(){
	      $.ajax({
	         type:"get",
	         url:"header.html",
	         async:true,
	         success:function(data){
	            $("#header").html(data);
	         }
	      });
	   });
	</script>
</head>
<body>
<header class="header" id="header"></header>
<br>
<br>
<fieldset class="layui-elem-field layui-field-title" >
		  <legend><img src="img/ic_honkan.svg" width="30px">&nbsp;&nbsp;订单列表</legend>
		</fieldset>
<br/>
<div class="" style="height: 100%; width: 1100px; margin: 10px auto;">
						<table class="layui-table" lay-skin="line" th:each="p: ${orderdto}">
							<colgroup>
								<col width="150">
								<col width="200">
								<col>
							</colgroup>
							<thead style="margin: 10px ;">
								<tr>
									<th colspan="7" th:text="'订单号：'+${p.order.onumber}">1231325645646</th>	
								</tr>
							</thead>
							<thead>
								<tr>
									<th width="170px">房间图片</th>
									<th>房间类型</th>
									<th>房间价格</th>
									<th>实付价格</th>
									<th>数量</th>
									<th>入住时间</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
 								<tr  style="height: 100px;" th:each="po: ${p.details}">
									<td><img th:src="@{/img/{imgpath}(imgpath=${po.imgpath})}"></td>
									<td th:text="${po.rtname}">豪华大床房</td>
									<td th:text="${po.oldprice}">￥1880</td>
									<td th:text="${po.newprice}">￥1230</td>
									<td th:text="${po.dayamount}">1</td>
									<td th:text="${po.checkin}">2019-07-20</td>
									<td>
									<span th:if="${p.order.ostate!='已消费'}">
											<input type="button" class="layui-btn  layui-btn-disabled" value="评&nbsp;&nbsp;&nbsp;价">
									</span>
									<span th:if="${p.order.ostate=='已消费'}">
										<a th:href="@{/order/opinion(odid=${po.odid},rtname=${po.rtname},checkin=${po.checkin})}" class="layui-btn">评&nbsp;&nbsp;&nbsp;价</a>
									</span>
									</td>
								</tr> 
								<tr  style="height: 40px;">
									  <td colspan="7" style="text-align: center;font-size: 18px;font-weight: 700px;" th:text="'总价：￥'+${p.order.totalprice}">总价：￥2222</td>
								</tr>
								<tr  style="height: 60px;">
										<td colspan="2" th:text="${p.order.ostart}">下单时间：2018-12-13</td>
										<td colspan="2" th:text="${p.order.ostate}">订单状态：未支付</td>
										<td></td>
										<td colspan="2" style="text-align: center;">
											<span th:if="${p.order.ostate=='未支付'}">
											<input type="button" class="layui-btn" value="支&nbsp;&nbsp;&nbsp;付">
											</span>
										</td>
								</tr>	
							</tbody>
						</table>
						</br>
				</div>


<script src="layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  
  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});

layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //常规轮播
  carousel.render({
    elem: '#test1'
    ,arrow: 'always'
  });
  
  //改变下时间间隔、动画类型、高度
  carousel.render({
    elem: '#test2'
    ,interval: 1800
    ,anim: 'fade'
    ,height: '120px'
  });
  
  //设定各种参数
  var ins3 = carousel.render({
    elem: '#test3'
  });
  //图片轮播
  carousel.render({
    elem: '#test10'
    ,width: '100%'
    ,height: '500px'
    ,interval: 5000
  });
  
  //事件
  carousel.on('change(test4)', function(res){
    console.log(res)
  });
  
  var $ = layui.$, active = {
    set: function(othis){
      var THIS = 'layui-bg-normal'
      ,key = othis.data('key')
      ,options = {};
      
      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      ins3.reload(options);
    }
  };
  
  //监听开关
  form.on('switch(autoplay)', function(){
    ins3.reload({
      autoplay: this.checked
    });
  });
  
  $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  });
  
  //其它示例
  $('.demoTest .layui-btn').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
			//页码
			layui.use(['laypage', 'layer'], function(){
			var laypage = layui.laypage
			,layer = layui.layer;
			laypage.render({
				elem: 'demo1'
				,count: 70 //数据总数
				,jump: function(obj){
				console.log(obj)
				}
			});
			laypage.render({
				elem: 'demo2'
				,count: 70 //数据总数
				,jump: function(obj){
				console.log(obj)
				}
			});
			});
			//全选
			document.getElementById("check").onclick = function() {
				var checked = document.getElementById("check").checked;
				var checkson = document.getElementsByName("oid");
				if (checked) {
					for (var i = 0; i < checkson.length; i++) {
						checkson[i].checked = true;
					}
				} else {
					for (var i = 0; i < checkson.length; i++) {
						checkson[i].checked = false;
					}
				}
			}

			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});


			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
</script>


</body>
</html>
